
<template>
  <div class="info">
    <van-nav-bar
      title="个人中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 头像 -->
    <info-item title="头像" @listClick="show = true">
      <img :src="infoList.avatar" alt="" />
    </info-item>
    <info-item
      title="昵称"
      :value="infoList.nickname"
      @listClick="pushNickname"
    ></info-item>
    <info-item title="手机号" :value="infoList.mobile" flag></info-item>
    <info-item title="性别" value="请选择" @listClick="setSex"></info-item>
    <info-item title="出生日期" value="请选择"></info-item>
    <info-item title="所在城市" value="请选择"></info-item>
    <info-item title="学科"></info-item>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      class="van-popup"
      :style="{ height: '30%' }"
    >
      <div class="popup">
        <span>拍照</span>
      </div>
      <div class="popup">
        <span @click="upImg">从手机相册选择</span>
        <input type="file" ref="fileRef" @change="fileChange" />
      </div>
      <div class="popup" @click="show = false">
        <span>取消</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import infoItem from "@/components/info_item.vue";
import { getuserInfo } from "@/request/longin";
import { setImg, setuser } from "@/request/info";
export default {
  name: "",
  components: { infoItem },
  data() {
    return {
      // 弹出层的状态
      show: false,
      infoList: {},
      nickname: "",
    };
  },
  created() {
    this.getuserInfo();
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 获取数据
    async getuserInfo() {
      let res = await getuserInfo();
      console.log(res);
      this.infoList = res.data.data;
      this.nickname = res.data.data.nickname;
    },

    //  修改图片
    upImg() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
    },
    //
    async fileChange(e) {
      let x = e.target.files[0];
      const fd = new FormData();
      fd.set("file", x);
      //上传 头像
      const res = await setImg(fd);
      //   console.log(res);

      //修改 头像地址
      const userInfo = await setuser({
        avatar: res.data.data.path,
      });

      // 调用 用户详情数据
      this.getuserInfo();
    },
    // 修改性别
    setgender() {},
    // 跳转修改昵称
    pushNickname() {
      this.$router.push({
        path: "nickname",
        query: {
          nickname: this.nickname,
        },
      });
    },
    // 跳转到修改性别
    setSex() {
      this.$router.push("/sex");
    },
  },
};
</script>
<style scoped lang='scss'>
.van-popup {
  width: 100%;
  text-align: center;

  .popup {
    margin: 0 auto;
    width: 80%;
    height: 80px;
    margin-top: 40px;
    border-bottom: 1px solid #8c8c9b;
  }
}
</style>
